<template>
    <div>
        <div class="head-project">
            <div class="title"><span>基础信息</span></div>
            <Dropdown @on-click="withGit">
                <a href="javascript:void(0)">
                    <Icon type="md-menu" size="18"/>
                </a>
                <DropdownMenu slot="list" style="width: 120px">
                    <DropdownItem name="git" style="display: flex;justify-content: space-between" v-if="gitLab && gitLab.gitLabUrl">
                        GitLab <Icon v-show="withGitLab" type="md-checkmark" color="#19be6b" size="16" style="vertical-align: sub;"/>
                    </DropdownItem>
                    <DropdownItem name="no" style="display: flex;justify-content: space-between">
                        Simple <Icon v-show="!withGitLab" type="md-checkmark" color="#19be6b" size="16" style="vertical-align: sub;"/>
                    </DropdownItem>
                </DropdownMenu>
            </Dropdown>
        </div>
        <GitInfo v-if="gitLab && gitLab.gitLabUrl && withGitLab" :gitLab="gitLab" ref="baseInfo" @changeApp="changeApp"></GitInfo>
        <Simple v-else ref="baseInfo" @changeApp="changeApp"></Simple>
    </div>
</template>

<script>
    import Simple from './Simple';
    import GitInfo from './GitBaseInfo';
    export default {
        data() {
            return {
                gitLab: null,
                withGitLab: false
            }
        },
        components:{
            Simple,
            GitInfo
        },
        created() {
            this.$axios.get('/mdo/api/v1/app/gitLab').then(res => {
                this.gitLab = res.data;
                this.withGitLab = true;
            });
        },
        methods: {
            withGit(name){
                if (name === 'git') {
                    this.withGitLab = true;
                } else {
                    this.withGitLab = false;
                }
            },
            async getData() {
                return await this.$refs['baseInfo'].getData();
            },
            changeApp(app){
                this.$emit('changeApp', app);
            }
        }
    };
</script>
<style lang="less">
    .item-inline {
        .ivu-form-item-content {
            display: flex;

            .ivu-select:not(.namespace) {
                .ivu-select-selection {
                    border-right: none;
                    border-bottom-right-radius: 0;
                    border-top-right-radius: 0;
                }
            }


            .item-line-middle {
                input {
                    border-radius: 0;
                }
            }

            .item-line-right {
                input {
                    border-left: none;
                    border-bottom-left-radius: 0;
                    border-top-left-radius: 0;
                }
            }
        }
        .append-input{
            input{
                border-right: none;
                border-bottom-right-radius: 0;
                border-top-right-radius: 0;
            }
        }

        .namespace{
            .ivu-select-selection{
                border-radius: 0 4px 4px 0;
            }
        }
    }

    .ivu-form-item-error{
        .item-inline{
            .ivu-input-group-append{
                background-color: @input-group-bg;
            }
        }
    }
</style>